<template>
  <div class="card-box">
    <template v-for="(item, index) in data" :key="index">
      <div class="card-item" :class="`cardBg${Number(index) % 3}`" :style="{ width: width }">
        <div class="card-title">
          <img :src="imgFunc(index)" alt="" />
          <div> {{ item.title }}</div>
        </div>
        <div class="card-row">
          <div class="row-item" v-for="(rowItem, rowIndex) in item.content" :key="rowIndex">
            <span>{{ rowItem.label }}：</span>
            <span>{{ rowItem.value }} {{ rowItem.unit || '' }}</span>
          </div>
          <!-- <div class="row-item">
            <span>{{ $t('custom.平均巡回接头时间') }}：</span>
            <span>{{ Math.floor(item.jointTimeAvg / 60) }} 分钟</span>
          </div>
          <div class="row-item">
            <span>{{ $t('custom.累计断头数') }}：</span>
            <span>{{ item.breakCnt }} 个</span>
          </div>
          <div class="row-item">
            <span>{{ $t('custom.累计接头数') }}：</span>
            <span>{{ item.jointCnt }} 个</span>
          </div>
          <div class="row-item">
            <span>{{ $t('custom.累计落纱次数') }}：</span>
            <span>{{ item.dofferCnt }} 次</span>
          </div> -->
        </div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
  import titleLogo1 from '@/assets/images/device-monitor/titleLogo1.png'
  import titleLogo2 from '@/assets/images/device-monitor/titleLogo2.png'
  import titleLogo3 from '@/assets/images/device-monitor/titleLogo3.png'

  defineProps({
    data: {
      type: Object,
      default: () => {}
    },
    width: {
      type: String,
      default: 'auto'
    }
  })

  const imgFunc = (index) => {
    return Number(index) % 3 == 0 ? titleLogo1 : Number(index) % 3 == 1 ? titleLogo2 : titleLogo3
  }
</script>
<style scoped lang="scss">
  .card-box {
    display: flex;
    width: fit-content;
  }

  .card-item {
    box-sizing: border-box;
    flex: 1;
    // width: 270px;
    height: auto;
    padding: 16px 20px;
    margin-right: 12px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-origin: 0 0;
    background-size: 100%;

    &.cardBg0 {
      background-image: url('../../../assets/images/device-monitor/cardBg1.png');
    }

    &.cardBg1 {
      background-image: url('../../../assets/images/device-monitor/cardBg2.png');
    }

    &.cardBg2 {
      background-image: url('../../../assets/images/device-monitor/cardBg3.png');
    }

    .card-title {
      display: flex;
      height: 26px;
      margin-bottom: 11px;
      font-size: 16px;
      line-height: 26px;

      img {
        margin-right: 6px;
      }

      & > div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .card-row {
      .row-item {
        display: flex;
        justify-content: space-between;
        height: 26px;
        padding: 0 23px 0 8px;
        font-size: 12px;
        line-height: 26px;
        border-radius: 4px;

        span:last-child {
          font-size: 14px;
          font-weight: bold;
          color: #202121;
        }
      }

      .row-item:nth-child(odd) {
        background-color: #f2f3f5;
      }

      .row-item:nth-child(even) {
        background-color: #fff;
      }
    }
  }
</style>
